<!--
 * @页面名称:全文路径管理
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card categoryManage">
    <el-space>
      <el-button type="primary" :disabled="BtnStatue[0]" @click="add">新增</el-button>
      <el-button :disabled="BtnStatue[1]" @click="edit">编辑</el-button>
      <el-button type="danger" :disabled="BtnStatue[2]" @click="del">删除</el-button>
    </el-space>
    <div style="height: calc(100% - 42px); margin-top: 10px">
      <stable :columns="tableSetting.columns" :data="tableSetting.data" @rowClick="rowClick"></stable>
    </div>
    <!-- 新增修改弹框 -->
    <el-dialog v-model="dialogSetting.visible" :title="dialogSetting.title" width="30%" draggable>
      <el-form label-width="90px" :model="formData" :rules="rules" ref="formRef">
        <el-form-item label="顺序号:" prop="RP_Order">
          <el-input v-model="formData.RP_Order"></el-input>
        </el-form-item>
        <el-form-item label="路径:" prop="RP_Path">
          <el-input v-model="formData.RP_Path"></el-input>
        </el-form-item>
        <el-form-item label="类型:" prop="RP_Type">
          <el-input v-model="formData.RP_Type" placeholder="请输入类型"></el-input>
        </el-form-item>
        <el-form-item label="创建时间:" prop="RP_Create_Time">
          <el-input disabled v-model="formData.RP_Create_Time"></el-input>
        </el-form-item>
        <el-form-item label="启用:" prop="RP_Enable">
          <el-switch v-model="formData.RP_Enable"></el-switch>
        </el-form-item>
        <el-form-item label="备注:" prop="RP_Remark">
          <el-input v-model="formData.RP_Remark" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogSetting.visible = false">取消</el-button>
          <el-button type="primary" @click="handle"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, onMounted } from "vue";
import type { FormRules, FormInstance } from "element-plus";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { userFormat } from "./userFormat";
import dtime from "moment";

const { proxy } = useCurrentInstance();
// 按钮状态
const BtnStatue = ref([false, true, true]);
// 表格配置
const tableSetting = reactive({
  columns: [
    { field: "RP_Order", title: "顺序号", sortable: true },
    { field: "RP_Path", title: "路径", sortable: true },
    { field: "RP_Type", title: "类型", sortable: true },
    { field: "RP_Create_By", title: "创建人", sortable: true, formatter: userFormat },
    { field: "RP_Create_Time", title: "创建时间", sortable: true },
    { field: "RP_Remark", title: "备注", sortable: true },
    {
      field: "RP_Enable",
      title: "启用",
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<el-switch disabled v-model={row.RP_Enable} />];
        }
      }
    }
  ],
  data: []
});
// 单击表格保存对象
const rowClickObj = ref();
// 弹出框配置
const dialogSetting = reactive({
  visible: false,
  title: "新增"
});
// 弹出框表单绑定字段
const formData = reactive({
  RP_Order: null,
  RP_Path: "",
  RP_Type: "",
  RP_Create_Time: "",
  RP_Enable: true,
  RP_Remark: ""
});
// 弹出框表单规则
const rules = reactive<FormRules>({
  RP_Order: [{ required: true, message: "请填写顺序号", trigger: "blur" }],
  RP_Path: [{ required: true, message: "请填写路径", trigger: "blur" }]
});
// 弹出框表单实例
const formRef = ref<FormInstance>();
// 获取路径数据
const getPathData = () => {
  proxy.$vueAxios.get("Master_Base_RelativePath/Get", { order: "RP_Order asc" }).then((res: any) => {
    tableSetting.data = res.List;
  });
};
// 表格单击事件
const rowClick = ({ row }: any) => {
  rowClickObj.value = row;
  BtnStatue.value[1] = false;
  BtnStatue.value[2] = false;
};
// 新增
const add = () => {
  dialogSetting.visible = true;
  dialogSetting.title = "新增";
  formData.RP_Create_Time = dtime(new Date()).format("YYYY-MM-DD HH:mm:ss");
  formRef.value?.resetFields();
};
// 修改
const edit = () => {
  dialogSetting.visible = true;
  dialogSetting.title = "修改";
  formData.RP_Path = rowClickObj.value.RP_Path;
  formData.RP_Type = rowClickObj.value.RP_Type;
  formData.RP_Enable = rowClickObj.value.RP_Enable;
  formData.RP_Order = rowClickObj.value.RP_Order;
  formData.RP_Remark = rowClickObj.value.RP_Remark;
  formData.RP_Create_Time = rowClickObj.value.RP_Create_Time;
};
// 删除
const del = () => {
  proxy.$messageBox
    .confirm("确定删除该数据？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      proxy.$vueAxios.post("Master_Base_RelativePath/Delete", [rowClickObj.value.RP_ID]).then((res: any) => {
        if (res.Mark) {
          getPathData();
          proxy.$message.success("删除成功");
        } else {
          proxy.$message.error("删除失败");
        }
      });
    })
    .catch(err => {
      console.log(err);

      proxy.$message("取消删除");
    });
};
// 新增修改确认事件
const handle = () => {
  formRef.value?.validate(isValid => {
    if (isValid) {
      if (dialogSetting.title === "新增") {
        proxy.$vueAxios
          .post("Master_Base_RelativePath", {
            rP_ID: proxy.$global.createID(),
            rP_Path: formData.RP_Path,
            rP_Type: formData.RP_Type,
            rP_Enable: formData.RP_Enable,
            rP_Create_By: JSON.parse(window.sessionStorage.getItem("user") as any).userInfo.U_ID,
            rP_Create_Time: formData.RP_Create_Time,
            rP_Remark: formData.RP_Remark,
            rP_Order: formData.RP_Order
          })
          .then(() => {
            dialogSetting.visible = false;
            getPathData();
          });
      } else {
        proxy.$vueAxios
          .put("Master_Base_RelativePath", {
            rP_ID: rowClickObj.value.RP_ID,
            rP_Path: formData.RP_Path,
            rP_Type: formData.RP_Type,
            rP_Enable: formData.RP_Enable,
            rP_Remark: formData.RP_Remark,
            rP_Order: formData.RP_Order,
            rP_Create_By: rowClickObj.value.RP_Create_By,
            rP_Create_Time: formData.RP_Create_Time
          })
          .then(() => {
            dialogSetting.visible = false;
            getPathData();
          });
      }
    }
  });
};
onMounted(() => {
  getPathData();
});
</script>

<style scoped lang="scss">
.categoryManage {
  height: 100%;
}
</style>
